<template>
  <div>
    <Row :gutter="20" style="margin-top: 20px;">
      <i-col span="24">
        <Card shadow>
           <tables ref="tables" creatPro editable searchable search-place="top" :creatModel="creatModel" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import Tables from '_c/tables'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { getTableData, postPro } from '@/api/data'
import Example from './example.vue'
export default {
  name: 'home',
  components: {
    Tables,
    InforCard,
    CountTo,
    Example
  },
  data() {
    return {
      columns: [
        { title: '名称', key: 'name', sortable: true },
        { title: '价格', key: 'price', sortable: true },
        { title: '积分', key: 'score', sortable: true },
        { title: '创建时间', key: 'create_time', sortable: true },
        {
          title: 'Handle',
          key: 'handle',
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '你确定要删除吗?'
                  },
                  on: {
                    'on-ok': () => {
                      vm.$emit('on-delete', params)
                      vm.$emit(
                        'input',
                        params.tableData.filter(
                          (item, index) => index !== params.row.initRowIndex
                        )
                      )
                    }
                  }
                },
                [h('Button', '自定义删除')]
              )
            }
          ]
        }
      ],
      tableData: [],
      creatModel: {
        title: '新建产品',
        creat: {},
        ok: data => {
          console.log('111', data)
          let { name, price, score } = data
          console.log(' name, price, score', name, price, score)

          postPro({ name, price, score }).then(res => {})
        },
        from: [
          {
            title: '名字',
            key: 'name'
          },
          {
            title: '积分',
            key: 'score'
          },
          {
            title: '价格',
            key: 'price'
          }
        ]
      }
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      })
    }
  },
  mounted() {
    getTableData().then(res => {
      console.log('res.data', res.data)
      this.tableData = res.data.results
    })
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
